<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/unslider.min.js"></script>

<style>
a{
	text-decoration: none;
	color: black;
}
 a:hover {
	color: purple;
}
html, body {
 font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
ul {
 padding: 0;
}
.banner { 
	position: relative; 
	overflow: top; 
	text-align: center;
}
.banner li {
 list-style: none; 
}
.banner ul li {
 float: left; 
}

#search_box { 
	margin: 10px 200px 10px 200px;
    width: 600px; 
    height: 31px; 
    background-color: #ccff66;
    border-style: outset;
    border-color: #ccff66;
} 
#search_box #s { 
float: left; 
padding: 0; 
margin: 6px 0 0 6px; 
border: 0; 
width: 550px; 
background: none; 
font-size: .8em; 
} 
#search_box #go { 
float: right; 
margin: 3px 4px 0 0; 
} 



div#tableContainer {
	display: table;
	border-spacing: 10px;
}

div#tableRow {
	display: table-row;
}

#person-pic{
	display: block;
	max-width:150px;
	min-height: 150px;
	margin: 70px 30px 25px 20px; 
}
#person{
	display: table-cell;
    padding:25px;
    vertical-align: top;
    width: 320px;
    border: 1px dashed #000;
    background-color: #ccffcc;
}
#person-msg{
    display: block;
    width: 220px;
    opacity: 0.5;
    padding: 10px 25px 10px 25px;
    border-radius: 15px;
    margin: 30px;
    font-size: 18px;
    text-align: center;

}
#main{
	display: table-cell; 
	padding:15px;
	vertical-align: top;
	width: 70%;
	border: 1px dashed #000;
	background-color: #ccffcc;
}
.content {
  min-width: 1000px;
  width: 100%;
  height: 300px;
  margin: auto; }

.box{
  width: 15.1%;
  padding-bottom: 10px;
  float: left;
  position: relative;
  cursor: pointer; 
  margin: 10px 5px 10px 5px;   
  border-radius: 15px;  
}
.box-text{
	text-align: center;
}
#recommend{
	display: block;
	width: 90%;
	height: 200px;
	margin:  20px ;
	border-radius: 15px;
}
#recommend.img{
	width: 100%;
}
</style>

</head>



<body>

<style>
#b06 { width: 640px;}
#b06 .dots { position: absolute; left: 0; right: 0; bottom: 20px; }
#b06 .dots li 
{ 
	display: inline-block; 
	width: 10px; 
	height: 10px; 
	margin: 0 4px; 
	text-indent: -999em; 
	border: 2px solid #fff; 
	border-radius: 6px; 
	cursor: pointer; 
	opacity: .4; 
	-webkit-transition: background .5s, opacity .5s; 
	-moz-transition: background .5s, opacity .5s; 
	transition: background .5s, opacity .5s;
}
#b06 .dots li.active 
{
	background: #fff;
	opacity: 1;
}
#b06 .arrow { position: absolute; top: 200px;}
#b06 #al { left: 15px;}
#b06 #ar { right: 15px;}
</style>
<div id="tableContainer">
    <div id="tableRow">   
        <div id="person">
	        <div id="person-pic"><img src="img/person1.png"></div>
	        <a href="enter.html"><div id="person-msg" style="background-color: #8A2BE2">个人信息</div></a>
	        <a href="mypublish.html"><div id="person-msg" style="background-color: #D2691E">我的发布</div></a>
	        <a href="bill.html"><div id="person-msg" style="background-color: #DAA520">我的拼单</div></a>
	        <a href="publish.html"><div id="person-msg" style="background-color: #20B2AA">我要发布</div></a>
	        <a href=""><div id="person-msg" style="background-color: #4169E1">使用指南</div></a>
	        <a href=""><div id="person-msg" style="background-color: #F08080">用户反馈</div></a>
        </div>
        <div id="main">
            <div id="search_box"> 
                <form id="search_form" method="post" action="#">
                <input type="text" id="s"  class="swap_value" /> 
                <input type="image" src="img/search1.gif" width="27" height="24" id="go" alt="" title="Search" /> 
                </form> 
            </div> 

            <div class="banner" id="b06">
                <ul>
                    <li><img class="sliderimg" src="img/01.jpg" alt=""  width="640" height="480" ></li>
                    <li><img class="sliderimg" src="img/02.jpg" alt=""  width="640" height="480" ></li>
                    <li><img class="sliderimg" src="img/03.jpg" alt=""  width="640" height="480" ></li>
                    <li><img class="sliderimg" src="img/04.jpg" alt=""  width="640" height="480" ></li>
                    <li><img class="sliderimg" src="img/05.jpg" alt=""  width="640" height="480" ></li>
                </ul>
                    <a href="javascript:void(0);" class="unslider-arrow06 prev"><img class="arrow" id="al" src="img/arrowl.png" alt="prev" width="20" height="35"></a>
                    <a href="javascript:void(0);" class="unslider-arrow06 next"><img class="arrow" id="ar" src="img/arrowr.png" alt="next" width="20" height="37"></a>
            </div>
            <div  class="  content ">
                <a class="box clothing"  href=" clothing.html " >
                <div  class="box-picture"><img src=" img/box11.jpg " alt="服装"><span class="box-text">服装</span></div>
                </a>
                <a class="box jewelry" href="  " >
                <div class="box-pict"><img src=" img/box22.jpg " alt=" 首饰"><span class="box-text">首饰</span></div>
                </a>
                <a class="box snacks"  href="  ">
                <div class="box-picture"><img src=" img/box33.jpg " alt="零食"><span class="box-text">零食</span></div>
                </a>
                <a class="box daily"  href="  ">
                <div class="box-picture"><img src=" img/box44.jpg " alt="生活"><span class="box-text">生活用品</span></div>
                </a>
                <a class="box study " href="  ">
                <div class="box-picture"><img src=" img/box55.jpg " alt="学习"><span class="box-text">学习用品</span></div>
                </a>
                <a  class="box cosmetic " href="  ">
                <div class="box-picture"><img src=" img/box66.jpg " alt="化妆品"><span class="box-text">化妆品</span></div>
                </a>
            </div>
            <div id="recommend">今日推荐<img src="img/recommend.gif"></div>
        </div>
    </div>
</div>


<script>
function imgReload()
{
	var imgHeight = 0;
	var wtmp = $("body").width();
	$("#b06 ul li").each(function(){
        $(this).css({width:wtmp + "px"});
    });
	$(".sliderimg").each(function(){
		$(this).css({width:wtmp + "px"});
		imgHeight = $(this).height();
	});
}

$(window).resize(function(){imgReload();});

$(document).ready(function(e) {
	imgReload();
    var unslider06 = $('#b06').unslider({
		dots: true,
		fluid: true
	}),
	data06 = unslider06.data('unslider');
	$('.unslider-arrow06').click(function() {
        var fn = this.className.split(' ')[1];
        data06[fn]();
    });
});
</script>
</body>
</html>

